<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Carbon - Admin Template</title>
    <link rel="stylesheet" href="/static/dist/vendor/simple-line-icons/css/simple-line-icons.css">
    <link rel="stylesheet" href="/static/dist/vendor/font-awesome/css/fontawesome-all.min.css">
    <link rel="stylesheet" href="/static/dist/css/styles.css">
</head>
<body>
<form method="get" action="/cmdb/login/forget_pass/send/">
    {% csrf_token %}
<div class="page-wrapper flex-row align-items-center">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-5">
                <div class="card p-4">

                    <div class="card-header text-center text-uppercase h4 font-weight-light">
                        找回密码（第二步）
                    </div>
                    <label style="color:red";>{{username}}</label>
                    <label>您正在使用密码找回功能，验证码将发送至以下邮箱：</label>
                    {% for item in email %}
                    <label style="color:red";>{{item.email}}</label>
                    {% endfor %}
                    <div class="card-body py-5">

                        <div class="form-group">
                            <label style="color:red";>{{status}}</label>
                            <div class="row">
                                <div class="col-6">
                                    <input type="text" class="form-control" name="code" placeholder="请输入验证码">
                                </div>
                                <div class="col-5">
                                    <input id="second" type="button" class="form-control btn btn-outline-primary" value="获取验证码" onclick="settime(this)">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-footer">
                        <div class="row">
                            <div class="col-6">
                                <input type="submit" class="btn btn-primary px-5" value="下一步">
                            </div>
                            <div class="col-6">
                                <a href="/cmdb/login/forget_pass/step/1/" class="btn btn-outline-primary px-5">上一步</a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
</form>
<script src="/static/dist/vendor/jquery/jquery.min.js"></script>
<script src="/static/dist/vendor/popper.js/popper.min.js"></script>
<script src="/static/dist/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/dist/vendor/chart.js/chart.min.js"></script>
<script src="/static/dist/js/carbon.js"></script>
<script src="/static/dist/js/demo.js"></script>
<script>

    //发送验证码时添加cookie
function addCookie(name,value,expiresHours){
    var cookieString=name+"="+escape(value);
    //判断是否设置过期时间,0代表关闭浏览器时失效
    if(expiresHours>0){
        var date=new Date();
        date.setTime(date.getTime()+expiresHours*1000);
        cookieString=cookieString+";expires=" + date.toUTCString();
    }
        document.cookie=cookieString;
}
//修改cookie的值
function editCookie(name,value,expiresHours){
    var cookieString=name+"="+escape(value);
    if(expiresHours>0){
      var date=new Date();
      date.setTime(date.getTime()+expiresHours*1000); //单位是毫秒
      cookieString=cookieString+";expires=" + date.toGMTString();
    }
      document.cookie=cookieString;
}
//根据名字获取cookie的值
function getCookieValue(name){
      var strCookie=document.cookie;
      var arrCookie=strCookie.split("; ");
      for(var i=0;i<arrCookie.length;i++){
        var arr=arrCookie[i].split("=");
        if(arr[0]==name){
          return unescape(arr[1]);
          break;
        }else{
             return "";
             break;
         }
      }

}


//主要逻辑代码
$(function(){
    $("#second").click(function (){
        sendCode($("#second"));
    });
    v = getCookieValue("secondsremained");//获取cookie值
    if(v>0){
        settime($("#second"));//开始倒计时
    }
})
//发送验证码
function sendCode(obj){
    //var phonenum = $("#phonenum").val();
    //var result = isPhoneNum();
    //if(result){
    email = document.getElementsByTagName('label')[2].innerHTML;
    username = document.getElementsByTagName('label')[0].innerHTML;
    console.log(email,username);
        doPostBack('/cmdb/login/forget_pass/send/',backFunc1,{"email":email,"username":username});
        addCookie("secondsremained",60,60);//添加cookie记录,有效时间60s
        settime(obj);//开始倒计时
    //}
}
//将手机利用ajax提交到后台的发短信接口
function doPostBack(url,backFunc,queryParam) {
//function doPostBack(url,queryParam) {
    $.ajax({
        async : false,
        cache : false,
        type : 'POST',
        url : url,// 请求的action路径
        data:queryParam,
        error : function() {// 请求失败处理函数
        },
        success : backFunc
        //success: function(){
        //},
    });
}
function backFunc1(data){
    var d = $.parseJSON(data);
    if(!d.success){
        alert(d.msg);
    }else{//返回验证码
        alert("模拟验证码:"+d.msg);
        $("#code").val(d.msg);
    }
}
//开始倒计时
var countdown;
function settime(obj) {
    countdown=getCookieValue("secondsremained");
    if (countdown == 0) {
        obj.removeAttr("disabled");
        obj.val("获取验证码");
        return;
    } else {
        obj.attr("disabled", true);
        obj.val("重新发送(" + countdown + ")");
        countdown--;
        editCookie("secondsremained",countdown,countdown+1);
    }
    setTimeout(function() { settime(obj) },1000) //每1000毫秒执行一次
}
//校验手机号是否合法
function isPhoneNum(){
    var phonenum = $("#phonenum").val();
    var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
    if(!myreg.test(phonenum)){
        alert('请输入有效的手机号码！');
        return false;
    }else{
        return true;
    }
}
</script>
</body>
</html>
